<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简历</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="bg-gread">
    <div class="container-fulid">
        <!-- 封面 -->
        <div class="container-fulid header-div">
            <div class="bgi"></div>
            <div class="container info-title">
                <h1 class="title text-center">个人简历</h1>
                <div class="text-center mt-5">
                    <span class="m-3">姓名：黄明杰</span>
                    <span class="m-3">性别：男</span>
                    <span class="m-3">学号：23002950</span><br>
                    <div class="mt-3">联系电话：15521287619</div><br>
                    <div>出生日期：2004年7月6日</div><br>
                    <div>现居住住址：广东省广州市</div><br>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="container-fulid p-10">
            <h1 class="text-center">关于我</h1>
			<div class="container mt-5">
				<div class="row">
					<div class="col-xl-4"><img src="images/background.jpg" alt="" width="100%" height="auto" class="myimage"></div>
					<div class="col-xl-8">
						<div class="container">
							<h5 class="p-3">我叫黄明杰，是一位智能制造学院软件技术专业的学生</h5>
							<li class="pt-2">本人性格内向，平时不爱说话，做事认真仔细。喜欢篮球、乒乓球等运动，喜欢和志同道合的朋友一起学习。</li>		
							<li class="pt-2">对网站后端领域的知识感兴趣。</li>
							<li class="pt-2">代码仓库：https://gitee.com/ZhaTG_0/akaJG</li>
							<li class="pt-2">座右铭：失败乃成功之母。</li>
							
						</div>
						
					</div>
				</div>
			</div>
			<div class="container-fulid bg-gread" style="margin: 100px 0 0 0">
				<h1 class="p-10 text-center">我的专业知识目标</h1>
				<div class="container mt-5 d-flex flex-wrap justify-content-center">
					<div class="pre">《</div>
					<div class="banner">
						<div class="sm-banner d-flex flex-wrap justify-content-around">
							<div class="skillinfo card">
								<div class="row">
									<div class="col-lg-4 col-sm-4 col-4"><img src="images/js-logo.png" width="100%" height="100%" alt=""></div>
									<div class="col-lg-8 col-sm-8 col-8">
										<div class="card-title mt-2">Javascript</div>
										<div class="card-text p-1">JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。</div>
									</div>
								</div>
							</div>
							<div class="skillinfo card">
								<div class="row">
									<div class="col-lg-4 col-sm-4 col-4"><img src="images/vue.png" width="100%" height="95%" alt=""></div>
									<div class="col-lg-8 col-sm-8 col-8">
										<div class="card-title mt-2">Vue</div>
										<div class="card-text p-1">是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计。</div>
									</div>
								</div>
							</div>
							<div class="skillinfo card">
								<div class="row">
									<div class="col-lg-4 col-sm-4 col-4"><img src="images/java1.jpg" width="100%" height="95%" alt=""></div>
									<div class="col-lg-8 col-sm-8 col-8">
										<div class="card-title mt-2">Java</div>
										<div class="card-text p-1">Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言,它可运行于多个平台</div>
									</div>
								</div>
							</div>
							<div class="skillinfo card">
								<div class="row">
									<div class="col-lg-4 col-sm-4 col-4"><img src="images/mysql1.jpg" width="100%" height="95%" alt=""></div>
									<div class="col-lg-8 col-sm-8 col-8">
										<div class="card-title mt-2">MySql</div>
										<div class="card-text p-1">MySQL是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS关系数据库管理系统应用软件之一。
									</div>
								</div>
							</div>
						</div>
						</div>
					</div>
					<div class="next">》</div>
				</div>
			</div>
        </div>
		
    </div>
	<div class="container-fluid text-light text-center bg-secondary mt-5 p-2">欢迎访问！</div>
</body>
	<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
	<script>
		$(()=>{
			var docwidth=$(window).width();
			var m_bannerWidth=$('.sm-banner').outerWidth()/2;
			if(docwidth<=800){
				m_bannerWidth=$('.sm-banner').outerWidth()/4;
			}
			var max_index=$('.sm-banner').outerWidth()/m_bannerWidth;
			var setLeft=$('.sm-banner').position().left=0;
			var index=1;
			
			$('.next').click(()=>{
				
				if(index>=max_index){
					setLeft=0;
					$('.sm-banner').animate({left:setLeft});
					index=1;
				}else{
					setLeft+=m_bannerWidth;
					$('.sm-banner').animate({left:-setLeft});
					index++;
				}
			})
			
			$('.pre').click(()=>{
				if(index<=1){
					setLeft=0;
//					临时判断语句
					if(docwidth>=800){
						setLeft=m_bannerWidth;
						console.log(setLeft+" ->> ");
					}else{
						setLeft=$('.sm-banner').outerWidth()-$('.skillinfo').outerWidth();
					}
					$('.sm-banner').animate({left:-setLeft});
					index=max_index;
				}else{
					setLeft-=m_bannerWidth;
					$('.sm-banner').animate({left:-setLeft});
					index--;
				}
			})
		})
	</script>
</html>